<template>
  <Auth :authority="['ROLE_ADMIN']" :access="$store.state.sys.user.access">
    <Row :gutter="20">
      <Col :span="10">
        <Card>
          <Tree
            :data="menuData"
            @on-select-change="treeSelect"
            show-checkbox
            v-model="menuVal"
          ></Tree>
        </Card>
      </Col>
      <Col :span="14">
        <Card>
          <template #title>
            <Avatar
              size="small"
              style="
                color: rgb(24, 144, 255);
                background-color: rgb(230, 247, 255);
              "
            >
              <Icon type="ios-apps"></Icon>
            </Avatar>

            {{ menuEditData.title }}
          </template>
          <Form :label-width="70">
            <FormItem label="页面标题">
              <Input v-model="menuEditData.title"></Input>
            </FormItem>
            <FormItem label="路径">
              <Input v-model="menuEditData.value"></Input>
            </FormItem>
            <FormItem label="菜单权限">
              <Input v-model="menuEditData.roleSet"></Input>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <template #noMatch>
      <Alert type="error">权限不足</Alert>
    </template>
  </Auth>
</template>

<script>
export default {
  name: "MenuView",
  data() {
    return {
      menuVal: "",
      menuEditData: "",
      menuData: [
        {
          title: "首页",
          expand: true,
          value: "/",
          selected: false,
          checked: false,
          children: [
            {
              title: "系统管理",
              expand: true,
              value: "/system",
              selected: false,
              checked: false,
              children: [
                {
                  title: "用户管理",
                  expand: true,
                  value: "/system/user",
                  roleSet: ["ROLE_ADMIN"],
                  selected: false,
                  checked: false,
                },
                {
                  title: "页面权限管理",
                  expand: true,
                  value: "/system/menu",
                  roleSet: ["ROLE_ADMIN"],
                  selected: false,
                  checked: false,
                },
                {
                  title: "角色管理",
                  expand: true,
                  value: "/system/role",
                  roleSet: ["ROLE_ADMIN"],
                  selected: false,
                  checked: false,
                },
              ],
            },
            {
              title: "流程页面",
              expand: true,
              value: "/system",
              selected: false,
              checked: false,
              children: [
                {
                  title: "审核原图",
                  expand: true,
                  value: "/process/audit",
                  roleSet: ["ROLE_ADMIN", "ROLE_AUDIT"],
                  selected: false,
                  checked: false,
                },
                {
                  title: "提炼日文",
                  expand: true,
                  value: "/process/extract",
                  roleSet: ["ROLE_ADMIN", "ROLE_EXTRACT"],
                  selected: false,
                  checked: false,
                },
                {
                  title: "翻译",
                  expand: true,
                  value: "/system/role",
                  roleSet: ["ROLE_ADMIN", "ROLE_TRANSLATE"],
                  selected: false,
                  checked: false,
                },
                {
                  title: "嵌字",
                  expand: true,
                  value: "/system/role",
                  roleSet: ["ROLE_ADMIN", "ROLE_INLAY"],
                  selected: false,
                  checked: false,
                },
              ],
            },
            {
              title: "查看漫画",
              expand: true,
              value: "/published",
              selected: false,
              checked: false,
              children: [
                {
                  title: "已发布漫画",
                  expand: true,
                  value: "/published/comic",
                  roleSet: ["所有人可查看"],
                  selected: false,
                  checked: false,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    treeSelect(data) {
      this.menuEditData = data[0];
    },
  },
};
</script>

<style>
</style>
